import { useArray } from "utils";
import * as React from "react";
export const TsReactTest = () => {
  const persons: { name: string; age: number }[] = [
    { name: "jack", age: 25 },
    { name: "amy", age: 23 },
  ];

  const { value, clear, removeIndex, add } = useArray(persons);

  // 错误的引用 期待TS报错
  // useMount(() => {
  //   console.log(value.notExist);
  //   add({name: 'david'});
  //   removeIndex("123");
  // })

  return (
    <div>
      <button onClick={() => add({ name: "john", age: 22 })}>add john</button>
      <button onClick={() => removeIndex(0)}>remove</button>
      <button onClick={() => clear()}>clear</button>
      {value.map((person: { age: number; name: string }, index: number) => (
        <div key={index}>
          <span>{index}</span>
          <span>{person.name}</span>
          <span>{person.age}</span>
        </div>
      ))}
    </div>
  );
};
